import styled from "styled-components";

export const MyStyle = styled.div`
    width:100%;
    height:calc(100vh - 3.25rem);
    background-color:#f6f7f9;
  
    .Mycontainer{
        .container_top{
            height:18rem;
                    width:100%;
                    /* margin-bottom:5rem;  */
                    background-image: linear-gradient(#c7d9f0, #ffffff);
                    display:flex;
                    flex-direction:column;
                    justify-content:center;
                    align-items:center;
                    .topbox{
                        width:30%;
                        height:50%;
                        margin-top:20%;
                        
                        display:flex;
                        flex-direction:column;
                        justify-content:space-between;
                        align-items:center;
                        flex-wrap:nowrap;
                        .box_img{
                        width:100%;
                            img{
                                width:100%;
                            }
                        }
                        .box_title{
                            /* font-weight:700; */
                            font-size:1.5rem;
                        }
                    }
                }
                .container_mid{
                    height:8rem;
                    .mid_container{
                        margin:0 auto;
                        width:85%;
                        height:80%;
                        background-color:white;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        .mid_left{
                            width:50%;
                            border-right: 1px solid #e5ebf3;
                            height: 60%;
                    
                            display:flex;
                            justify-content:center;
                            align-items:center;
                            svg{
                                width:2rem;
                                height:2rem;
                                margin-right:1rem;
                            }
                            .info{
                                height:100%;
                                width:60%;
                              
                                display:flex;
                                flex-direction:column;
                                justify-content:center;
                                align-items:start;
                                .infotop{

                                }
                                .infobottom{
                                    display:flex;
                                    flex-direction:row;
                                    justify-content:center;
                                    align-items:center;
                                    .desc{
                                        font-size:.5rem;
                                    }
                                    svg{
                                        
                                        width:.5rem;
                                        height:1rem;
                                    }
                                }
                            }
                        }
                        .mid_right{
                            width:50%;
                            height: 60%;
                            display:flex;
                            justify-content:center;
                            align-items:center;
                            svg{
                                width:2rem;
                                height:2rem;
                                margin-right:1rem;
                            }
                            .info{
                                height:100%;
                                width:60%;
                    
                                display:flex;
                                flex-direction:column;
                                justify-content:center;
                                align-items:start;
                                .infotop{

                                }
                                .infobottom{
                                    display:flex;
                                    flex-direction:row;
                                    justify-content:center;
                                    align-items:center;
                                    .desc{
                                        font-size:.5rem;
                                    }
                                    svg{
                                        width:.5rem;
                                        height:1rem;
                                    }
                                }
                            }
                        }
                    }
                }
                .container_bottom{
                    height:25rem;
                    width:100%;
                   
                    .displaycontaner{
                        width:90%;
                        margin:0 auto;
                        height:100%;
                        display: grid;
                        grid-template-columns:2rem auto 1rem;
                        grid-template-rows:repeat(6, 3rem);
                        grid-template-areas: 'a b c'
                                            'd e f'
                                            'g h i'
                                            'j k l'
                                            'm n o'
                                            'p q x'; 
                        justify-items: start;
                        align-items: center;
                        .item-1{
                            grid-area: a;
                            svg{
                                width:80%;
                            }
                        }
                        .item-2{
                            grid-area: b;
                            .title{
                                font-size:.8rem;
                                margin-bottom:0.2rem;
                            }
                        }
                        .item-3{
                            grid-area: c;
                            svg{
                                width:100%;
                            }
                        }
                        .item-4{
                            grid-area: d;
                            svg{
                                width:80%;
                            }
                        }
                        .item-5{
                            grid-area: e;
                            .title{
                                font-size:.8rem;
                                margin-bottom:0.2rem;
                            }
                        }
                        .item-6{
                            grid-area: f;
                            svg{
                                width:100%;
                            }
                        }
                        .item-7{
                            grid-area: g;
                            svg{
                                width:80%;
                            }
                        }
                        .item-8{
                            grid-area: h;
                            .title{
                                font-size:.8rem;
                                margin-bottom:0.2rem;
                            }
                        }
                        .item-9{
                            grid-area: i;
                            svg{
                                width:100%;
                            }
                        }
                        .item-10{
                            grid-area: j;
                            svg{
                                width:80%;
                            }
                        }
                        .item-11{
                            grid-area: k;
                            .title{
                                font-size:.8rem;
                                margin-bottom:0.2rem;
                            }

                        }
                        .item-12{
                            grid-area: l;
                            svg{
                                width:100%;
                            }
                        }
                        .item-13{
                            grid-area: m;
                            svg{
                                width:80%;
                            }
                        }
                        .item-14{
                            grid-area: n;
                            .title{
                                font-size:.8rem;
                                margin-bottom:0.2rem;
                            }
                        }
                        .item-15{
                            grid-area: o;
                            svg{
                                width:100%;
                            }
                        }
                        .item-16{
                            grid-area: p;
                            svg{
                                width:80%;
                            }
                        }
                        .item-17{
                            grid-area: q;
                            .title{
                                font-size:.8rem;
                                margin-bottom:0.2rem;
                            }
                        }
                        .item-18{
                            grid-area: x;
                            svg{
                                width:100%;
                            }
                        }
                    }

                }
        }

    
 
 
`